<template>
  <div class="root">
    <div class="searchResult" v-if="isShow" ref="S">
      <div class="itemCity" v-for="item of Searchs" :key="item.id">
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div class="container">
      <div class="top">
        <div class="topBar">
          <button @click="goBack">×</button>
          <span>当前城市</span>
        </div>
        <div class="input">
          <button class="clearInput" ref="C" @click="handleClear">取消</button>
          <van-cell-group>
            <van-field
              v-model="value"
              class="search"
              placeholder="输入城市名或拼音"
              @input="handleInput"
            />
          </van-cell-group>
        </div>
      </div>

      <div class="hotCity">
        <p>GPS定位你所在的城市</p>
        <div class="cities">
          <button @click="checkCity(nowCity)">{{nowCity}}</button>
        </div>

        <p>热门城市</p>
        <div class="cities">
          <button v-for="item of hotCity" @click="checkCity(item.name)" :key="item.id">
            {{ item.name }}
          </button>
        </div>
      </div>

      <div class="itemCity">
        <van-index-bar :index-list="indexList">
          <div v-for="(letter, index) of cities" :key="index">
            <van-index-anchor :index="index">{{ index }}</van-index-anchor>
            <p class="itemS" @click="checkCity(item.name)" v-for="item of letter" :key="item.id">{{ item.name }}</p>
          </div>
        </van-index-bar>
      </div>
    </div>
  </div>
</template>

<script>
import {setStorage} from "../../assets/js/Storage.js"
import jsonpAdapter from "axios-jsonp"
export default {
  data() {
    return {
      hotCity: [],
      cities: {},
      Allcity: [],
      indexList: [],
      value: "",
      isShow: true,
      Searchs: [],
      nowCity:[],
    };
  },
  mounted() {
    this.$http(`http://122.112.161.135:8000/city`).then((res) => {
      this.hotCity = res.data.data.hotCities;
      this.cities = res.data.data.cities;
      this.indexList = Object.keys(res.data.data.cities)
      var arr = Object.values(res.data.data.cities);
      //   console.log(arr);
      arr.forEach((item) => {
        this.Allcity.push(...item);
      });
    });

    this.$http({
      url:`https://apis.map.qq.com/ws/location/v1/ip`,
      method:"get",
      params:{
        key:"23NBZ-R2B36-ZK2SU-MRIQS-KWFL6-QUFPQ",
        output:"jsonp",
      },
      adapter: jsonpAdapter,
    }).then(res=>{
      console.log(res.data.result.ad_info.city.slice(0,2))
      this.nowCity = res.data.result.ad_info.city.slice(0,2)
      setStorage("nowCity",this.nowCity)
    })
  },
  methods: {
    handleInput() {
      console.log(this.value);
      var val = this.value;
      this.$refs.S.style.opacity = 1;
      this.$refs.C.style.opacity = 1;
      if (val == "") {
        this.Searchs = [];
      } else {
        this.Searchs = this.Allcity.filter((item) => {
          return item.name.includes(val)||item.spell.includes(val);
        });
      }
      if(this.Searchs.length==0){
          this.$refs.S.innerHTML = "没有找到匹配的城市"
      }else{
          this.$refs.S.innerHTML =""
      }
    },
    handleClear() {
      this.$refs.S.style.opacity = 0;
      this.$refs.C.style.opacity = 0;
      this.value = "";
    },
    goBack(){
        this.$router.back()
    },
    checkCity(ct){
        // console.log(ct);
        setStorage("city",ct)
        this.$router.back();
    }
  },
};
</script>

<style scoped>
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #efefef;
  z-index: 1000;
}
.topBar {
  background-color: #fff;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: 0.5rem;
}
.topBar button {
  float: left;
  width: 1rem;
  height: 1rem;
  font-size: 0.8rem;
  background-color: transparent;
  border: none;
}
.input {
  padding: 0.2rem;
  position: relative;
}
.input .search {
  width: 100%;
  height: 0.7rem;
  border-radius: 0.2rem;
  border: none;
  padding-left: 0.8rem;
  box-sizing: border-box;
  font-size: 0.38rem;
}
.root {
  padding-top: 2.1rem !important;
}
.hotCity {
  background-color: #fff;
}
.hotCity::before {
  clear: both;
  content: "";
  display: table;
}
.hotCity p {
  margin: 0.3rem;
}
.cities {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 0.2rem;
}
.cities button {
  width: 3rem;
  height: 1rem;
  border: none;
  border-radius: 0.2rem;
  margin: 0.2rem 0;
}
.itemS {
  display: block;
  background-color: #fff;
  padding: 0.2rem;
}
.searchResult {
  position: fixed;
  top: 2.1rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  opacity: 0;
  z-index: -1;
}
.clearInput {
  position: absolute;
  right: 0.4rem;
  top: 0.35rem;
  z-index: 100;
  opacity: 0;
}
</style>